<template>
  <el-dialog :title="!dataForm.id ? '会员投诉新增':'会员投诉处理'" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="110px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="投诉单号" prop="complainNum">
            <el-input v-model="dataForm.complainNum" readonly :disabled="fromEdit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="投诉类型" prop="complaintsType">
            <el-select v-model="dataForm.complaintsType" :disabled="fromEdit">
              <el-option v-for="item in complaintsTypeOptions" :key="item.value" :value="item.value" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="配镜单号" prop="billId">
            <el-input v-model="dataForm.billId" readonly :disabled="fromEdit">
              <el-button slot="append" icon="el-icon-search" :disabled="fromEdit">选择</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="会员卡号" prop="customerCard">
            <el-input v-model="dataForm.customerCard" readonly :disabled="fromEdit">
              <el-button slot="append" icon="el-icon-search" :disabled="fromEdit" @click="queryCustomerList">选择</el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="会员姓名" prop="customerName">
            <el-input v-model="dataForm.customerName" readonly :disabled="fromEdit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="会员电话" prop="phone1">
            <el-input v-model="dataForm.phone1" readonly :disabled="fromEdit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计处理日期" prop="estimatedProcessingDate">
            <el-date-picker v-model="dataForm.estimatedProcessingDate" type="date" style="width: 100%;" value-format="yyyy-MM-dd" :disabled="fromEdit"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="投诉内容" prop="comlainContent">
            <el-input v-model="dataForm.comlainContent" type="textarea" :disabled="fromEdit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!fromEdit">
        <el-col>
          <el-form-item label="处理投诉">
            <el-switch v-model="switchValue"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="switchValue || fromEdit">
        <el-row>
          <el-col>
            <el-form-item label="处理状态" prop="status">
              <el-select v-model="dataForm.status">
                <el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="处理结果" prop="dealContent">
              <el-input v-model="dataForm.dealContent" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>保 存</el-button>
    </span>
    <!-- 弹窗，会员查询 -->
    <customer-search v-if="customerDialog.visible" ref="customerSearch" @refreshForm="updateFormData"></customer-search>
  </el-dialog>
</template>

<script>
  import {
    customerComplaintCreateOddNum,
    customerComplaintAddObj,
    customerComplaintInfo,
    customerComplaintEdit
  } from '@/api/eims/customer-complaint.js'
  import {
    fetchCustomerList
  } from '@/api/eims/customer.js'
  import CustomerSearch from '@/components/business/customer-search.vue'

  export default {
    data() {
      return {
        ischeck: false,
        visible: false,
        switchValue: false,
        fromEdit: false,
        detailData: {},
        dataForm: {
          complainNum: '',
          complaintsType: '',
          customerId: '',
          customerCard: '',
          customerName: '',
          phone1: '',
          estimatedProcessingDate: '',
          comlainContent: '',
          status: '',
          dealContent: ''
        },
        dataRule: {
          complaintsType: [{
            required: true,
            message: '请选择投诉类型'
          }],
          customerCard: [{
            required: true,
            message: '请选择投诉客户'
          }],
          estimatedProcessingDate: [{
            required: true,
            message: '请选择预处理日期'
          }],
          status: [{
            required: true,
            message: '请选择处理状态',
            trigger: 'blur'
          }],
          dealContent: [{
            required: true,
            message: '请选择处理状态',
            trigger: 'blur'
          }],
        },
        complaintsTypeOptions: [{
            value: '01',
            name: '商品质量'
          }, {
            value: '02',
            name: '验光'
          }, {
            value: '03',
            name: '销售'
          }, {
            value: '04',
            name: '加工质量'
          }, {
            value: '05',
            name: '检验'
          },
          {
            value: '06',
            name: '送货'
          }, {
            value: '07',
            name: '服务态度'
          }, {
            value: '08',
            name: '订单失误'
          }, {
            value: '09',
            name: '调整校配'
          }, {
            value: '10',
            name: '时间延误'
          }
        ],
        statusOptions: [{
          value: 0,
          name: '请选择'
        }, {
          value: 2,
          name: '处理中'
        }, {
          value: 1,
          name: '已处理'
        }],
        statusOptions2: [{
          value: 2,
          name: '处理中'
        }, {
          value: 1,
          name: '已处理'
        }],
        customerDialog: {
          visible: false,
          dataList: [],
          dataListLoading: false,

        }
      }
    },
    components: {
      CustomerSearch
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.switchValue = false
        this.fromEdit = false
        this.dataForm.customerId = ''
        this.dataForm.status = ''
        this.dataForm.dealContent = ''
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.fromEdit = true
            customerComplaintInfo(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      // 查询会员表
      queryCustomerList() {
        this.customerDialog.visible = true
        this.$nextTick(() => {
          this.$refs.customerSearch.init()
        })
      },
      updateFormData(data) {
        this.dataForm.customerCard = data.customerCard
        this.dataForm.customerName = data.name
        this.dataForm.phone1 = data.phone1
        this.dataForm.customerId = data.id
      },
      // 增加、修改会员回访记录
      dataFormSubmit() {
        this.ischeck = true
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              if (this.dataForm.status != 0) {
                customerComplaintEdit(this.dataForm).then(response => {
                  if(response.data.code == '0'){
                    this.$message.success('处理成功')
                    this.visible = false
                    this.$emit('refreshDataList')
                  }else{
                    this.$message.error(response.data.msg)
                  }
                  this.ischeck = false
                }).catch(() => {
                  this.ischeck = false
                })
              } else {
                this.ischeck = false
                this.$message.warning("请选择处理状态");
              }
            } else {
              if (this.switchValue == true) {
                if (this.dataForm.status == 0) {
                  this.ischeck = false
                  this.$message.warning("请选择处理状态");
                  return
                }
              }
              customerComplaintAddObj(this.dataForm).then(result => {
                if(response.data.code == '0'){
                  this.$message.success('添加成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
                this.ischeck = false
              }).catch(() => {
                this.ischeck = false
              })
            }
          }else{
            this.ischeck = false
          }
        })
      },
    }
  }
</script>

<style>
</style>
